/** 
*我的待办 
*/
<template>
	<div class="layout-parent">
		<vp-tabs >
			<vp-tab-pane label="待办工作/Todo List" >
				<vp-main-page  v-loading="loading">
					<template #search>
						<el-form label-suffix=":"  ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="handleSearch" label-width="120px">
							<vp-search-row >
								<vp-search-col>
									<el-form-item prop="keyword">
										<template #label><vp-label-keyword/></template>
										<el-input v-model="searchForm.keyword" v-trim placeholder=""></el-input>
									</el-form-item>
								</vp-search-col>
								<vp-search-col btn-col>
									<vp-btn-search :loading="loading" @click="loadDataList"/>
									<vp-btn-reset @click="handleSearchReset"/>
								</vp-search-col>
							</vp-search-row>
						</el-form>
					</template>
					<template #table>
						<vp-table ref="tableRef"  :data="tableData" @sort-change="handleSortChange" stripe border style="width: 100%" row-key="id">
							<el-table-column  type="index" align="center" label="#">
							</el-table-column>
							<el-table-column :label="$t('workflow.task.processName')" prop="DEF.NAME_" sortable="custom" show-overflow-tooltip width="200">
								<template #header><vp-label zh="流程名称" en="Process Name"/></template>
								<template #default="{row}">
									<span v-html="markTextColor(searchForm.keyword, row.processName)"></span>
								</template>
							</el-table-column>
							<el-table-column :label="$t('workflow.task.name')" prop="T.NAME_" sortable="custom" show-overflow-tooltip width="200"> 
								<template #header><vp-label zh="节点名称" en="Node Name"/></template>
								<template #default="{row}">
									<span v-html="markTextColor(searchForm.keyword, row.name)"></span>
								</template>
							</el-table-column>
							<el-table-column :label="$t('workflow.task.title')" prop="REL.title" sortable="custom" show-overflow-tooltip >
								<template #header><vp-label zh="任务描述" en="Task Desc"/></template>
								<template #default="{row}">
									<span v-html="markTextColor(searchForm.keyword, row.title)"></span>
								</template>
							</el-table-column>
							<el-table-column :label="$t('workflow.task.receiveTime')" prop="T.CREATE_TIME_" sortable="custom" show-overflow-tooltip width="200">
								<template #header><vp-label zh="接收时间" en="Receive Time"/></template>
								<template #default="{row}">
									{{row.receiveTime}}
								</template>
							</el-table-column>
							<el-table-column :label="$t('workflow.priority')" prop="T.PRIORITY_" sortable="custom" show-overflow-tooltip width="150">
								<template #header><vp-label zh="优先级" en="Priority"/></template>
								<template #default="{row}">
									<el-tag v-if="row.priority===10" type="danger">立即/</el-tag>
									<el-tag v-else-if="row.priority===20" type="warning">紧急</el-tag>
									<el-tag v-else-if="row.priority===30" >急</el-tag>
									<el-tag v-else-if="row.priority===40" type="info">一般</el-tag>
									<el-tag v-else type="info">低</el-tag>
								</template>
							</el-table-column>
							<!-- <el-table-column :label="$t('workflow.task.limitDate')" prop="T.DUE_DATE_" sortable="custom" show-overflow-tooltip width="125">
								<template #default="{row}">
									{{row.limitDate}}
								</template>
							</el-table-column> -->
							<el-table-column :label="$t('item.operations')" fixed="right"  width="120">
								<template #header>
									<vp-label-operations/>
								</template>
								<template #default="scope">
									<el-space>
										<vp-btn type="text"  @click="handleDo(scope.row)"><vp-label zh="办理" en="Do"/></vp-btn>
										<vp-btn text  @click="handleView(scope.row)"><vp-label zh="查看" en="View"/></vp-btn>
									</el-space>
								</template>
							</el-table-column>
						</vp-table>
					</template>
				</vp-main-page>
				<!-- <el-pagination background class="mt5"
					layout="prev, pager, next, sizes, total" 
					@size-change="page.pageNum = 1"
					:total="page.total"
					v-model:currentPage="page.pageNum"
					v-model:pageSize="page.pageSize"
					:hide-on-single-page="false"
				>
				</el-pagination> -->
			</vp-tab-pane>
			<vp-tab-pane label="我发起的流程/Initiated By Me" >
				<vp-main-page  v-loading="loading1">
					<template #search>
						<el-form label-suffix=":"  ref="searchFormRef1" :model="searchForm1" @submit.prevent @keyup.enter="handleSearch1" label-width="120px">
							<vp-search-row >
								<vp-search-col>
									<el-form-item prop="keyword">
										<template #label><vp-label-keyword/></template>
										<el-input v-model="searchForm1.keyword" v-trim placeholder=""></el-input>
									</el-form-item>
								</vp-search-col>
								<vp-search-col btn-col>
									<vp-btn-search :loading="loading" @click="loadDataList1"/>
									<vp-btn-reset @click="handleSearchReset1"/>
								</vp-search-col>
							</vp-search-row>
						</el-form>
					</template>
					<template #table>
						<vp-table ref="tableRef1" v-loading="loading1" :data="tableData1" @sort-change="handleSortChange1" stripe border     style="width: 100%" row-key="id">
							<el-table-column  type="index" align="center" label="#">
							</el-table-column>
							<el-table-column :label="$t('workflow.task.processName')" prop="DEF.NAME_" sortable="custom" show-overflow-tooltip width="200">
								<template #header><vp-label zh="流程名称" en="Process Name"/></template>
								<template #default="{row}">
									<span v-html="markTextColor(searchForm1.keyword, row.processName)"></span>
								</template>
							</el-table-column>
							<el-table-column :label="$t('workflow.task.title')" prop="REL.title" sortable="custom" show-overflow-tooltip >
								<template #header><vp-label zh="任务描述" en="Task Desc"/></template>
								<template #default="{row}">
									<span v-html="markTextColor(searchForm1.keyword, row.title)"></span>
								</template>
							</el-table-column>
							<el-table-column :label="$t('workflow.task.startTime')" prop="T.START_TIME_" sortable="custom" show-overflow-tooltip width="200">
								<template #header><vp-label zh="开启时间" en="Processing Time"/></template>
								<template #default="{row}">
									{{row.receiveTime}}
								</template>
							</el-table-column>
							<el-table-column :label="$t('workflow.task.processInsState')" prop="T.STATE_" sortable="custom" show-overflow-tooltip width="200">
								<template #header><vp-label zh="流程状态" en="Process State"/></template>
								<template #default="{row}">
									{{row.processInsState}}
								</template>
							</el-table-column>
							<el-table-column :label="$t('item.operations')" fixed="right"  width="75">
								<template #header>
									<vp-label-operations/>
								</template>
								<template #default="scope">
									<el-space>
										<vp-btn text v-if="scope.row.businessView"  @click="handleView(scope.row)"><vp-label zh="查看" en="View"/></vp-btn>
									</el-space>
								</template>
							</el-table-column>
						</vp-table>
					</template>
					<template #pagination>
						<vp-pagination
							@change="loadDataList1"
							:total="page1.total" 
							v-model:currentPage="page1.pageNum"
							v-model:pageSize="page1.pageSize"
						>
						</vp-pagination>
					</template>
				</vp-main-page>
				<!-- <el-pagination background class="mt5"
					layout="prev, pager, next, sizes, total" 
					@size-change="page1.pageNum = 1"
					:total="page1.total"
					v-model:currentPage="page1.pageNum"
					v-model:pageSize="page1.pageSize"
					:hide-on-single-page="false"
				>
				</el-pagination> -->
			</vp-tab-pane>
			<vp-tab-pane label="已办工作/Done List" >
				<vp-main-page  v-loading="loading1">
					<template #search>
						<el-form label-suffix=":"  ref="searchFormRef2" :model="searchForm2" @submit.prevent @keyup.enter="handleSearch2" label-width="120px">
							<vp-search-row >
								<vp-search-col>
									<el-form-item prop="keyword">
										<template #label><vp-label-keyword/></template>
										<el-input v-model="searchForm2.keyword" v-trim placeholder=""></el-input>
									</el-form-item>
								</vp-search-col>
								<vp-search-col btn-col>
									<vp-btn-search :loading="loading" @click="loadDataList2"/>
									<vp-btn-reset @click="handleSearchReset2"/>
								</vp-search-col>
							</vp-search-row>
						</el-form>
					</template>
					<template #table>
						<vp-table ref="tableRef2" v-loading="loading2" :data="tableData2" @sort-change="handleSortChange2" stripe border     style="width: 100%" :row-key="(row: any) => {return row.id + '_' + row.actId}">
							<el-table-column  type="index" align="center" label="#">
							</el-table-column>
							<el-table-column :label="$t('workflow.task.processName')" prop="DEF.NAME_" sortable="custom" show-overflow-tooltip width="200">
								<template #header><vp-label zh="流程名称" en="Process Name"/></template>
								<template #default="{row}">
									<span v-html="markTextColor(searchForm2.keyword, row.processName)"></span>
								</template>
							</el-table-column>
							<el-table-column :label="$t('workflow.task.title')" prop="REL.title" sortable="custom" show-overflow-tooltip >
								<template #header><vp-label zh="任务描述" en="Task Desc"/></template>
								<template #default="{row}">
									<span v-html="markTextColor(searchForm2.keyword, row.title)"></span>
								</template>
							</el-table-column>
							<el-table-column :label="$t('workflow.task.startTime')" prop="T.START_TIME_" sortable="custom" show-overflow-tooltip width="150">
								<template #header><vp-label zh="开启时间" en="Start Time"/></template>
								<template #default="{row}">
									{{row.receiveTime}}
								</template>
							</el-table-column>
							<el-table-column :label="$t('workflow.task.processNode')" prop="AHT.NAME_" sortable="custom" show-overflow-tooltip width="150">
								<template #header><vp-label zh="处理节点" en="Process Node"/></template>
								<template #default="{row}">
									{{row.actName}}
								</template>
							</el-table-column>
							<el-table-column :label="$t('item.processTime')" prop="AHT.END_TIME" sortable="custom" show-overflow-tooltip width="150">
								<template #header><vp-label zh="处理时长" en="Processing Time"/></template>
								<template #default="{row}">
									{{row.endTime}}
								</template>
							</el-table-column>
							<el-table-column :label="$t('workflow.task.processInsState')" prop="T.STATE_" sortable="custom" show-overflow-tooltip width="200">
								<template #header><vp-label zh="流程状态" en="Process State"/></template>
								<template #default="{row}">
									{{row.processInsState == 'ACTIVE'?row.name:row.processInsState}}
								</template>
							</el-table-column>
							<el-table-column :label="$t('item.operations')" fixed="right"  width="100">
								<template #header>
									<vp-label-operations/>
								</template>
								<template #default="scope">
									<el-space>
										<vp-btn text v-if="scope.row.businessView"  @click="handleView(scope.row)"><vp-label zh="查看" en="View"/></vp-btn>
										<vp-btn type="text" v-if="scope.row.retrievable"  @click="handleBack(scope.row)"><vp-label zh="取回" en="Back"/></vp-btn>
									</el-space>
								</template>
							</el-table-column>
						</vp-table>
					</template>
					<template #pagination>
						<vp-pagination
							@change="loadDataList2"
							:total="page2.total" 
							v-model:currentPage="page2.pageNum"
							v-model:pageSize="page2.pageSize"
						>
						</vp-pagination>
					</template>	
				</vp-main-page>	
			</vp-tab-pane>
		</vp-tabs>
		<UserDialog ref="userDialogRef"></UserDialog>
	</div>
</template>

<script setup lang="ts" name="systemUserTask">
import { ref, toRefs, reactive, onMounted, watch, defineAsyncComponent} from 'vue';
import request from '/@/utils/request';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import { DEFAULT_PAGE } from '/@/utils/page';
import { markTextColor } from '/@/utils/toolsValidate';

const UserDialog = defineAsyncComponent(() => import('/@/components/vp/user/VpUserDialog.vue'));
const activeName = ref("model")
const searchForm = reactive({
	keyword: "",
});
const searchForm1 = reactive({
	keyword: "",
});
const searchForm2 = reactive({
	keyword: "",
});

const page1 = reactive({
	...DEFAULT_PAGE,
})
const page = reactive({
	...DEFAULT_PAGE,
})

const page2 = reactive({
	...DEFAULT_PAGE,
})

const loading = ref(false);
const loading1 = ref(false);
const loading2 = ref(false);
const tableData = ref([]);
const tableData1 = ref([]);
const tableData2 = ref([]);

const loadDataList = () => {
	loading.value = true
	request.get('/workflow/todo/list', {
		params: {
			...searchForm,
			...page,
		}
	}).then(res => {
		tableData.value = res?.data || []
		// state.page.total = res?.data?.total || 0
		// state.page.pageNum = res?.data?.pageNum || 1
	}).finally(()=>{
		loading.value = false
	})
}

const loadDataList1 = () => {
	loading1.value = true
	request.get('/workflow/initiated/list', {
		params: {
			...searchForm1,
			...page1,
		}
	}).then(res => {
		tableData1.value = res?.data?.list || []
		page1.total = res?.data?.total || 0
		page1.pageNum = res?.data?.pageNum || 1
	}).finally(()=>{
		loading1.value = false
	})
}

const loadDataList2 = () => {
	loading2.value = true
	request.get('/workflow/done/list', {
		params: {
			...searchForm2,
			...page2,
		}
	}).then(res => {
		tableData2.value = res?.data?.list || []
		page2.total = res?.data?.total || 0
		page2.pageNum = res?.data?.pageNum || 1
	}).finally(()=>{
		loading2.value = false
	})
}
const searchFormRef = ref();
const searchFormRef1 = ref();
const searchFormRef2 = ref();

const handleSearch = ()=>{
	if(page.pageNum == 1){
		loadDataList()
	}else{
		page.pageNum = 1
	}
}
const handleSearch1 = ()=>{
	if(page1.pageNum == 1){
		loadDataList1()
	}else{
		page1.pageNum = 1
	}
}
const handleSearch2 = ()=>{
	if(page2.pageNum == 1){
		loadDataList2()
	}else{
		page2.pageNum = 1
	}
}
const handleSearchReset = ()=>{
	searchFormRef.value.resetFields();
}
const handleSearchReset1 = ()=>{
	searchFormRef1.value.resetFields();
}
const handleSearchReset2 = ()=>{
	searchFormRef2.value.resetFields();
}
const handleSortChange = (column: any)=>{
	page.sortColumn = column.prop;
	page.sortOrder = column.order == 'descending' ? 'desc': 'asc'
	loadDataList()
}
const handleSortChange1 = (column: any)=>{
	page1.sortColumn = column.prop;
	page1.sortOrder = column.order == 'descending' ? 'desc': 'asc'
	loadDataList1()
}
const handleSortChange2 = (column: any)=>{
	page2.sortColumn = column.prop;
	page2.sortOrder = column.order == 'descending' ? 'desc': 'asc'
	loadDataList2()
}
watch(()=>[page.pageNum, page.pageSize], ()=>{
	loadDataList()
})
watch(()=>[page1.pageNum, page1.pageSize], ()=>{
	loadDataList1()
})
watch(()=>[page2.pageNum, page2.pageSize], ()=>{
	loadDataList2()
})
onMounted(() => {
	loadDataList()
	loadDataList1()
	loadDataList2()
})

const router = useRouter();
const handleDo = (row: any)=>{
	if(row.view){
		router.push({
			name: row.view,
			params: {
				processInsId: row.processInsId,
				taskId: row.id,
				businessId: row.businessId,
			},
		})
	}else{
		ElMessage.error("未定义的表单，请联系管理员/For forms with undefined questions, please contact the administrator");
	}
}

const handleView = (row: any)=>{
	if(row.businessView){
		router.push({
			name: row.businessView,
			params: {
				id:row.businessId
			},
		})
	}else{
		ElMessage.error("未定义的表单，请联系管理员/For forms with undefined questions, please contact the administrator");
	}
}

const userDialogRef = ref();

/**
 * 转办事件
 * @param row 
 */
const handleChangeAssignee = (row: any) =>{
	userDialogRef.value.handleOpen({
		type: 1, // 1、选择人员t_user 2、选择档案b_p3_001
		multi: false,    // 是否多选
		//selected: state.formData.sqrdaid, // 默认选中人员id
		callback: (data: any) => {
			if(data && data.yhid){
				request.post('/workflow/change/assignee',{
					taskId: row.id,
					assignee: data.yhid,
				}).then(()=>{
					loadDataList()
					ElMessage.success("操作成功/Success.");
				}).catch(()=>{

				})
			}
		}
	})
}

/**
 * 取回任务
 * @param row 
 */
const handleBack = (row: any) => {
	VpMessageBox.confirm({
			zh: '是否确定取回流程？',
			en: 'Are you sure about the retrieval process?',
		}, {
			zh: '提示',
			en: 'Info',
		}, {
			type: 'warning',
		}).then(()=>{
			loading2.value = true;
			request.post('/workflow/back',{
				processInsId: row.processInsId,
				nextStep: row.taskDefKey,
			}).then(()=>{
				loadDataList2();
				ElMessage.success("操作成功/Success.");
			}).finally(()=>{
				loading2.value = false
			})
		});
}


const tableRef = ref();
const tableRef1 = ref();
const tableRef2 = ref();

</script>
<style scoped > 
    :deep(.layout-padding) {
        padding-top: 0px !important;
    }
</style>